<template>
    <view class="app-container order">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <template #top>
                <zzk-nav title="客户管理"></zzk-nav>
            </template>
            <view class="order-list">
                <view class="order-item" v-for="item in list" :key="item.id">
                    <view class="top flexrow">
                        <image class="img" :src="item.avatar" mode="aspectFill" v-if="item.avatar"></image>
                        <image class="img" src="/static/images/avatar-select.png" mode="aspectFill" v-else></image>
                        <text class="name">{{ item.name || '-' }}</text>
                    </view>
                    <view class="mid">
                        <text class="txt">手机号：{{ item.phone }}</text>
                        <text class="txt">客户等级：{{ clientLevel[item.level] }}</text>
                    </view>
                    <view class="bottom flexrow">
                        <text class="set" @tap="setClientLevel(item)">修改客户等级</text>
                    </view>
                </view>
            </view>
        </z-paging>
        <up-picker :show="show" :columns="[columns]" keyName="name" @cancel="show = false" @confirm="getLevel"></up-picker>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { clientList, setLevel } from '@/api/client.js'
import { clientLevel } from '@/utils/status.js'
import { showToast } from '@/utils/util'

const paging = ref(null)
const list = ref([])
const curr = ref({})
const show = ref(false)
const columns = ref([])

onLoad(() => {
    for (const [key, value] of Object.entries(clientLevel)) {
        columns.value.push({
            name: value,
            key: key
        })
    }
})

const queryList = (pageNo, pageSize) => {
    const params = {
        page: pageNo,
        size: pageSize,
    }
    clientList(params).then(res => {
        paging.value.complete(res.records)
    })
}

const setClientLevel = (item) => {
    curr.value = item
    show.value = true
}

const getLevel = (e) => {
    show.value = false
    uni.showLoading()
    const data = {
        clientId: curr.value.id,
        level: e.value[0].key
    }
    setLevel(data).then(res => {
        paging.value.reload()
        uni.hideLoading()
        showToast('设置成功')
    }).catch(e => {
        uni.hideLoading()
    })
}
</script>

<style lang="scss" scoped>
.order {
    &-list {
        padding: 20rpx $zzk-margin 0;
    }
    &-item {
        padding: 24rpx;
        border-radius: 16rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        .top {
            margin-bottom: 8rpx;
        }
        .img {
            width: 48rpx;
            height: 48rpx;
            display: block;
            border-radius: 50%;
        }
        .name {
            font-size: 28rpx;
            line-height: 48rpx;
            font-weight: 700;
            padding-left: 20rpx;
        }
        .txt {
            line-height: 48rpx;
            color: #999;
            font-size: 28rpx;
        }
        .bottom {
            justify-content: flex-end;
        }
        .set {
            font-size: 24rpx;
            border: $u-error 2rpx solid;
            line-height: 44rpx;
            padding: 0 16rpx;
            border-radius: 4rpx;
            background-color: $u-error-light;
            color: $u-error;
        }
    }
}
</style>